//自调用函数
(function () {
  // 1、页面一加载就要知道页面宽度计算
  var setFont = function () {
    // 因为要定义变量可能和别的变量相互冲突，污染，所有用自调用函数
    var html = document.documentElement;// 获取html
    // 获取宽度
    var width = html.clientWidth;

    // 判断
    if (width < 1024) width = 1024
    if (width > 1920) width = 1920
    // 设置html的基准值
    var fontSize = width / 80 + 'px';
    // 设置给html
    html.style.fontSize = fontSize;
  }
  setFont();
  // 2、页面改变的时候也需要设置
  // 尺寸改变事件
  window.onresize = function () {
    setFont();
  }
})();

// 监控
(function () {
  //事件委托
  $('.monitor').on('click', ' a', function () {
    //点击当前的a 加类名 active  他的兄弟删除类名
    $(this).addClass('active').siblings().removeClass('active');
    //获取一一对应的下标 
    var index = $(this).index();
    //选取content 然后狗日对应下标的 显示   当前的兄弟.content隐藏
    $('.content').eq(index).show().siblings('.content').hide();
  });
  //滚动
  //原理：把marquee下面的子盒子都复制一遍 加入到marquee中
  //      然后动画向上滚动，滚动到一半重新开始滚动
  //因为选取的是两个marquee  所以要遍历
  $('.monitor .marquee').each(function (index, dom) {
    //将每个 的所有子级都复制一遍
    var rows = $(dom).children().clone();
    //再将新的到的加入原来的
    $(dom).append(rows);
  });
})();

// 点位分布统计
(function () {
  var myechart = echarts.init($('.pie')[0]);
  option = {
    // 控制提示
    tooltip: {
      // 非轴图形，使用item的意思是放到数据对应图形上触发提示
      trigger: 'item',
      // 格式化提示内容：
      // a 代表图表名称 b 代表数据名称 c 代表数据  d代表  当前数据/总数据的比例
      formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    // 控制图表
    series: [
      {
        // 图表名称
        name: '地区',
        // 图表类型
        type: 'pie',
        // 南丁格尔玫瑰图 有两个圆  内圆半径10%  外圆半径70%
        // 百分比基于  图表DOM容器的半径
        radius: ['10%', '70%'],
        // 图表中心位置 left 50%  top 50% 距离图表DOM容器
        center: ['50%', '50%'],
        // 半径模式，另外一种是 area 面积模式
        roseType: 'radius',
        // 数据集 value 数据的值 name 数据的名称
        data: [
          { value: 20, name: '云南' },
          { value: 5, name: '北京' },
          { value: 15, name: '山东' },
          { value: 25, name: '河北' },
          { value: 20, name: '江苏' },
          { value: 35, name: '浙江' },
          { value: 30, name: '四川' },
          { value: 40, name: '湖北' }
        ],
        //文字调整
        label: {
          fontSize: 10
        },
        //引导线
        labelLine: {
          length: 8,
          length2: 10
        }
      }
    ],
    color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff']
  };
  myechart.setOption(option);
})();

// 全国用户总量统计
(function () {
  // 中间省略的数据  准备三项
  var item = {
    name: '',
    value: 1200,
    // 柱子颜色
    itemStyle: {
      color: '#254065'
    },
    // 鼠标经过柱子颜色
    emphasis: {
      itemStyle: {
        color: '#254065'
      }
    },
    // 工具提示隐藏
    tooltip: {
      extraCssText: 'opacity:0'
    }
  };
  option = {
    // 工具提示
    tooltip: {
      // 触发类型  经过轴触发axis  经过轴触发item
      trigger: 'item',
      // 轴触发提示才有效
      axisPointer: {
        // 默认为直线，可选为：'line' 线效果 | 'shadow' 阴影效果       
        type: 'shadow'
      }
    },
    // 图表边界控制
    grid: {
      // 距离 上右下左 的距离
      left: '0',
      right: '3%',
      bottom: '3%',
      top: '5%',
      // 大小是否包含文本【类似于boxsizing】
      containLabel: true,
      //显示边框
      show: true,
      //边框颜色
      borderColor: 'rgba(0, 240, 255, 0.3)'
    },
    // 控制x轴
    xAxis: [
      {
        // 使用类目，必须有data属性
        type: 'category',
        // 使用 data 中的数据设为刻度文字
        data: ['上海', '广州', '北京', '深圳', '合肥', '', '......', '', '杭州', '厦门', '济南', '成都', '重庆'],
        // 刻度设置
        axisTick: {
          // true意思：图形在刻度中间
          // false意思：图形在刻度之间
          alignWithLabel: false,
          show: false
        },
        //文字
        axisLabel: {
          color: '#4c9bfd'
        }
      }
    ],
    // 控制y轴
    yAxis: [
      {
        // 使用数据的值设为刻度文字
        type: 'value',
        axisTick: {
          // true意思：图形在刻度中间
          // false意思：图形在刻度之间
          alignWithLabel: false,
          show: false
        },
        //文字
        axisLabel: {
          color: '#4c9bfd'
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(0, 240, 255, 0.3)'
          }
        },
      }
    ],
    // 控制x轴
    series: [
      {
        // series配置
        // 颜色
        itemStyle: {
          // 提供的工具函数生成渐变颜色
          color: new echarts.graphic.LinearGradient(
            // (x1,y2) 点到点 (x2,y2) 之间进行渐变
            0, 0, 0, 1,
            [
              { offset: 0, color: '#00fffb' }, // 0 起始颜色
              { offset: 1, color: '#0061ce' }  // 1 结束颜色
            ]
          )
        },
        // 图表数据名称
        name: '用户统计',
        // 图表类型
        type: 'bar',
        // 柱子宽度
        barWidth: '60%',
        // 数据
        data: [2100, 1900, 1700, 1560, 1400, item, item, item, 900, 750, 600, 480, 240]
      }
    ]
  };
  var myechart = echarts.init($('.users .bar')[0]);
  myechart.setOption(option);
})();

//订单
(function () {
  var data = {
    day365: { orders: '20,301,987', amount: '99834' },
    day90: { orders: '301,987', amount: '9834' },
    day30: { orders: '1,987', amount: '3834' },
    day1: { orders: '987', amount: '834' }
  }
  //点击事件
  $('.order').on('click', '.filter a', function () {
    //点击之后加类名
    $(this).addClass('active').siblings().removeClass('active');
    // 先获取点击a的 data-key自定义属性
    var key = $(this).attr('data-key');
    //获取自定义属性
    // data{}==>data.shuxing data['shuxing]
    key = data[key];//
    $('.order .item h4:eq(0)').text(key.orders);
    $('.order .item h4:eq(1)').text(key.amount);
  });
  //定时器
  var index = 0;
  var aclick = $('.order a');
  setInterval(function () {
    index++;
    if (index > 3) {
      index = 0;
    }
    //每san秒调用点击事件
    aclick.eq(index).click();
  }, 3000);
})();

//销售统计
(function () {
  var option = {
    //鼠标提示工具
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      // 类目类型                                  
      type: 'category',
      // x轴刻度文字                                  
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      axisTick: {
        show: false//去除刻度线
      },
      axisLabel: {
        color: '#4c9bfd'//文本颜色
      },
      axisLine: {
        show: false//去除轴线  
      },
      boundaryGap: false//去除轴内间距
    },
    yAxis: {
      // 数据作为刻度文字                                  
      type: 'value',
      axisTick: {
        show: false//去除刻度线
      },
      axisLabel: {
        color: '#4c9bfd'//文本颜色
      },
      axisLine: {
        show: false//去除轴线  
      },
      boundaryGap: false//去除轴内间距
    },
    //图例组件
    legend: {
      textStyle: {
        color: '#4c9bfd' // 图例文字颜色
      },
      right: '10%'//距离右边10%
    },
    // 设置网格样式
    grid: {
      show: true,// 显示边框
      top: '20%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      borderColor: '#012f4a',// 边框颜色
      containLabel: true // 包含刻度文字在内
    },
    series: [
      {
        name: '预期销售额',
        // 数据                                  
        data: [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
        // 图表类型                                  
        type: 'line',
        // 圆滑连接                                  
        smooth: true,
        itemStyle: {
          color: '#00f2f1'  // 线颜色
        }
      },
      {
        name: '实际销售额',
        // 数据                                  
        data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
        // 图表类型                                  
        type: 'line',
        // 圆滑连接                                  
        smooth: true,
        itemStyle: {
          color: '#ed3f35'  // 线颜色
        }
      }
    ]
  };
  var myechart = echarts.init($('.line')[0]);
  myechart.setOption(option);

  //点击效果
  var data = {
    year: [
      [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
      [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
    ],
    quarter: [
      [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
      [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34]
    ],
    month: [
      [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
      [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98]
    ],
    week: [
      [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
      [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24]
    ]
  }
  $('.sales ').on('click', '.caption a', function () {
    $(this).addClass('active').siblings('a').removeClass('active');
    //option series   data
    //获取自定义属性值
    var key = $(this).attr('data-type');
    //取出对应的值
    key = data[key];
    //将值设置到 图表中
    option.series[0].data = key[0];
    option.series[1].data = key[1];
    //再次调用才能在页面显示
    myechart.setOption(option);
  });
  //定时器
  var index = 0;
  var timer = setInterval(function () {
    index++;
    if (index > 4) {
      index = 0;
    };
    $('.sales .caption a').eq(index).click();
  }, 2000);
})();

// 一季度销售进度
(function () {
  var option = {
    series: [
      {
        type: 'pie',
        radius: ['130%', '150%'],  // 放大图形
        center: ['50%', '80%'],    // 往下移动  套住75%文字
        label: {
          show: false,
        },
        startAngle: 180,
        hoverOffset: 0,  // 鼠标经过不变大
        data: [
          {
            value: 100,
            itemStyle: { // 颜色渐变#00c9e0->#005fc1
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  { offset: 0, color: '#00c9e0' },
                  { offset: 1, color: '#005fc1' }
                ]
              }
            }
          },
          { value: 100, itemStyle: { color: '#12274d' } }, // 颜色#12274d
          { value: 200, itemStyle: { color: 'transparent' } }// 透明隐藏第三块区域
        ]
      }
    ]
  };
  var myechart = echarts.init($('.gauge')[0]);
  myechart.setOption(option);
})();

// 全国热榜
(function () {
  var data = [
    { name: '可爱多', num: '9,086' },
    { name: '娃哈哈', num: '8,341' },
    { name: '喜之郎', num: '7,407' },
    { name: '八喜', num: '6,080' },
    { name: '小洋人', num: '6,724' },
    { name: '好多鱼', num: '2,170' },
  ]
  $('.inner').on('mouseenter', '.sup li', function () {
    $(this).addClass('active').siblings().removeClass('active');
    //获取随机的值  sort方法 是给数组排序 a-b是从小到大
    //.5-随机0-1的数 可能为正可能为负 排序就会随机
    var radomData = data.sort(function (a, b) { return 0.5 - Math.random() });
    var html = '';
    radomData.forEach(function (item) {
      html += `<li><span>${item.name}</span><span>${item.num} <s class="icon-up"></s></span></li>`;
    });
    //渲染
    $('.sub').html(html);
  });
  $('.province .sup li').eq(0).mouseenter();
  var index = 0;
  var timer = setInterval(() => {
    index++;
    if (index > 5) {
      index = 0;
    }
    $('.sup li').eq(index).mouseenter();
  }, 2000);
})();